<template>
    <div id="container">
        Vue Router Demo
        <div style="display: flex;flex-direction: row; width: 400px;height: 100px;background-color: beige;">
            <div style="display: flex;flex-direction: column;">
                <router-link class="nav" to="/about" active-class="active">About</router-link>
                <router-link class="nav" to="/home" active-class="active">Home</router-link>
            </div>
            <div>
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script>
import Vue from 'vue';
import About from './components/About.vue';
import Home from './components/Home.vue';
export default Vue.extend({
    name: "App",
    components: { About, Home },
})
</script>
<style>
#container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nav {
    width: 70px;
    height: 40px;
    background-color: khaki;
    margin: 4px 0 4px 0;
    border: 2px solid #f2af28;
    border-radius: 5px;
}

.nav:hover {
    background-color: orange;
}

.active {
    box-shadow: 3px 3px 2px 1px rgba(0, 0, 255, .2);
}
</style>